<include file="public@header_vue"/>
</head>
<body>
<div id="app">
<el-tabs type="border-card">
    <el-tab-pane label="发红包记录" v-loading="onDataLoading">

        <!--<el-alert title="说明：表格的流名称同时也是直播申请id，请注意（本页面记录的是商家阿里云直播的推流回调记录）" type="success" :closable="false" style="margin-bottom: 20px;width:80%;"></el-alert>-->


        <el-form :inline="true" :model="form" class="demo-form-inline" size="mini">

            <el-form-item label="直播主题：">
                <el-input v-model="form.theme" placeholder="请输入直播主题"></el-input>
            </el-form-item>

<!--            <el-form-item label="公司手机号：">-->
<!--                <el-input v-model="form.mobile" placeholder="请输入公司手机号"></el-input>-->
<!--            </el-form-item>-->

            <el-form-item label="创建时间：">
                <el-date-picker v-model="form.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp" style="width: 220px"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="clearForm()">清空</el-button>
                <el-button type="primary" @click="fetchData()">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%">

            <el-table-column prop="id" label="红包ID" width="80" show-overflow-tooltip></el-table-column>

            <el-table-column prop="id" label="直播主题" width="160" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.apply_live.theme}}</span>
                </template>
            </el-table-column>

<!--            <el-table-column prop="total" label="红包金额" show-overflow-tooltip width="120"></el-table-column>-->

            <el-table-column prop="total" label="对应积分" show-overflow-tooltip width="120">
                <template slot-scope="scope">
                    <span>{{scope.row.total*100}}</span>
                </template>
            </el-table-column>

            <el-table-column prop="num" label="发数量" show-overflow-tooltip width="80"></el-table-column>

            <el-table-column prop="receive_count" label="领数量" show-overflow-tooltip width="80"></el-table-column>

            <el-table-column prop="is_end" label="类型" show-overflow-tooltip width="120">
                <template slot-scope="scope">
                    <span v-if="scope.row.is_end > 0" style="color:red;">领光啦</span>
                    <span v-else style="color:green;">有剩余</span>
                </template>
            </el-table-column>

            <el-table-column prop="name" label="操作公司" show-overflow-tooltip width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.apply_live.company.name}}</span>
                </template>
            </el-table-column>

            <el-table-column prop="merchant_mobile" label="公司手机号" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.apply_live.company.contact_mobile}}</span>
                </template>
            </el-table-column>

            <el-table-column prop="create_time" label="创建时间" min-width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{formatDateAll(scope.row.create_time)}}
                </template>
            </el-table-column>

            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">领取记录</el-button>
                    <!--<el-button type="text" size="small">编辑</el-button>-->
                </template>
            </el-table-column>

        </el-table>

        <el-pagination background layout="prev, pager, next" :page-size="15" :total="totalNum" :current-page.sync="currentPage" @current-change="fetchData">
        </el-pagination>
    </el-tab-pane>


    <el-dialog :visible.sync="dialogVisible" width="65%" v-loading.fullscreen="layerLoading">

        <el-form :inline="true" :model="receiveForm" class="demo-form-inline" size="mini">

            <el-form-item label="编号：">
                <el-input v-model="receiveForm.member_no" placeholder="请输入领取人编号"></el-input>
            </el-form-item>

            <el-form-item label="创建时间：">
                <el-date-picker v-model="receiveForm.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" value-format="timestamp" style="width: 220px"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="danger" @click="clearReceiveForm()">清空</el-button>
                <el-button type="primary" @click="receiveLog()">查询</el-button>
            </el-form-item>
        </el-form>


        <el-table :data="receiveData" style="width: 100%">

            <el-table-column prop="id" label="ID" width="100" show-overflow-tooltip></el-table-column>

            <el-table-column prop="total" label="领取积分" show-overflow-tooltip width="150"></el-table-column>

            <el-table-column prop="type" label="类型" width="120" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>用户</span>
                </template>
            </el-table-column>

            <el-table-column prop="nickname" label="昵称" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.member.nickname}}</span>
                </template>
            </el-table-column>

            <el-table-column prop="member_no" label="编号" width="150" show-overflow-tooltip>
                <template slot-scope="scope">
                    <span>{{scope.row.member.member_no}}</span>
                </template>
            </el-table-column>

            <el-table-column prop="create_time" label="时间" min-width="200" show-overflow-tooltip>
                <template slot-scope="scope">
                    {{formatDateAll(scope.row.create_time)}}
                </template>
            </el-table-column>

        </el-table>

        <el-pagination background layout="prev, pager, next" :page-size="15" :total="receive_totalNum" :current-page.sync="receive_currentPage" @current-change="receiveLog">
        </el-pagination>

    </el-dialog>
    
</el-tabs>
</div>
</body>
<style>
.el-pagination {
    margin-top: 20px;
}
.el-collapse {
    margin-top: 10px;
}
.detil-item {
    padding: 20px 0px;
}
.left-span {
    width: 100px;
}
</style>
<script>
var app = new Vue({
    el: '#app',
    data: function() {
        return {
            tableData: [],
            onDataLoading: false,
            totalNum: 0,
            currentPage: 1,
            form: {
                theme:'',
                mobile:'',
                date:'',
            },
            editForm: {

            },
            score:0,
            deductible_score:0,
            dialogVisible: false,
            layerLoading: false,

            receiveForm: {
                member_no:'',
                date:'',
            },
            receiveData:[],
            receive_totalNum:0,
            receive_currentPage:1
        }
    },
    created () {
      this.fetchData();//初始化
    },
    methods: {
        clearForm () {
            console.log(this.form);
            this.form = {
                theme:'',
                mobile:'',
                date:'',
            }
        },
        clearReceiveForm () {
            console.log(this.receiveForm);
            this.receiveForm = {
                member_no:'',
                date:'',
            }
        },
        fetchData (page = 1) {
            let _this  = this;
            let theme  = '';
            let mobile = '';
            let date   = '';
            let params = {page: page};

            if(_this.form.theme != ''){
                params.theme = this.form.theme;
            }
            if(_this.form.mobile != ''){
                params.mobile = this.form.mobile;
            }
            if(_this.form.date != ''){
                params.date = this.form.date;
            }
            this.onDataLoading = true;
            
            axios.get('/admin/Live/send_red_envelopes', {
                 headers: {
                        'X-Requested-With': 'XMLHttpRequest',
                    },
                params: params
            }).then(function (response) {

                _this.onDataLoading = false;

                if (response.data.code === 1) {

                    console.log(response.data.data);
                   _this.tableData = response.data.data.data;
                   _this.totalNum  = response.data.data.total;
                } else {
                   _this.$message({
                        message: response.data.msg,
                        type: 'warning'
                    });
            }
            }).catch(function (error) {
                _this.onDataLoading = false;
                _this.$message.error(error.toString())
            })
        },

        receiveLog (page = 1) {
            let _this  = this;
            let id     = this.editForm.id;
            let member_no = '';
            let date   = '';
            let params = {id: id, page: page};
            if(_this.receiveForm.member_no != ''){
                params.member_no = this.receiveForm.member_no;
            }
            if(_this.receiveForm.date != ''){
                params.date = this.receiveForm.date;
            }
            this.layerLoading = true;

            axios.get('/admin/Live/receiveLog', {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                },
                params: params
            }).then(function (response) {

                _this.layerLoading = false;

                if (response.data.code === 1) {

                    console.log(response.data.data);
                    _this.receiveData       = response.data.data.data;
                    _this.receive_totalNum  = response.data.data.total;
                } else {
                    _this.$message({
                        message: response.data.msg,
                        type: 'warning'
                    });
                }
            }).catch(function (error) {
                _this.layerLoading = false;
                _this.$message.error(error.toString())
            })
        },

        edit(row) {
            this.editForm = JSON.parse(JSON.stringify(row));//深拷贝
            this.receiveLog(this.receive_currentPage);
            this.dialogVisible = true;
        },

        excel () {
            let _this = this;
            let like  = '';
            let date  = '';

            if(_this.form.like != ''){
                like = this.form.like;
            }

            if(_this.form.date != ''){
                date = this.form.date;
            }

            let params = {date:date };

            window.location.href = '/admin/score/excel?like='+like+'&date='+date+'';

        },

        formatDateFull(timestamp) {
            let date = new Date(timestamp * 1000);
            return date.getFullYear() + '-' + this.prefix(date.getMonth() + 1) + '-' + this.prefix(date.getDate());
        },
        formatDateAll(timestamp) {
            let date = new Date(timestamp * 1000);
            return date.getFullYear() + '-' + this.prefix(date.getMonth() + 1) + '-' + this.prefix(date.getDate()) + ' ' + this.prefix(date.getHours()) + ':' + this.prefix(date.getMinutes()) + ':' + this.prefix(date.getSeconds());
        },
        formatDate(timestamp) {
            let date = new Date(timestamp * 1000);
            return date.getFullYear() + '-' + this.prefix(date.getMonth() + 1) + '-' + this.prefix(date.getDate());
        },
        prefix(num) {
            if (num < 10) {
                return '0' + num;
            }
            return num;
        }
  
        
    }
})
</script>
</html>
